<script setup lang='ts'>
import { ref } from 'vue'

const loginForm = ref({
    tel: '',
    authCode: ''
})
const loginFormRules = {
    tel: [{ required: true, message: '请输入手机号码' }],
    authCode: [{ required: true, message: '请输入短信验证码' }]
}
const telInputValidateStatus = ref('')
const login = async () => {
    console.log('验证成功！')
}
const getAuthBtnLoading = ref(false)
const getAuthBtnDisable = ref(true)
const getAuthBtnText = ref('获取验证码')

</script>

<template>
    <a-row>
        <a-col :span="12" class="left">
            <div class="wrapper">
                <div class="title">
                    <img src="@/assets/img/logo.png" alt="" class="s">
                </div>
                <div class="desc">这是我用过的最好的建站工具</div>
                <div class="user">王铁锤,Google</div>
            </div>
        </a-col>
        <a-col :span="12" class="right">
            <div class="login-wrapper">
                <div class="title">欢迎回来</div>
                <div class="desc">使用手机号和验证码登录到慕课乐高</div>
                <a-form :model="loginForm" name="login" :wrapper-col="{ span: 24 }" autocomplete="off" @finish="login">
                    <a-form-item name="tel" :rules="loginFormRules.tel" :validateTrigger="telInputValidateStatus">
                        <a-input v-model:value="loginForm.tel" size="large" placeholder="手机号码" class="tel-input">
                            <template #suffix>
                                <i class="iconfont icon-user"></i>
                            </template>
                        </a-input>
                    </a-form-item>

                    <a-form-item name="authCode" :rules="loginFormRules.authCode">
                        <a-input v-model:value="loginForm.authCode" size="large" placeholder="四位验证码" class="code-input">
                            <template #suffix>
                                <i class="iconfont icon-pwd"></i>
                            </template>
                        </a-input>
                    </a-form-item>

                    <a-form-item class="btn-line">
                        <a-button shape="round" type="primary" size="large" html-type="submit">登录</a-button>
                        <a-button shape="round" size="large" :loading="getAuthBtnLoading" :disabled="getAuthBtnDisable">{{
                            getAuthBtnText }}</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </a-col>
    </a-row>
</template>

<style scoped lang='scss'>
@import '@/assets/styles/mixin.scss';

.ant-row {
    height: 100%;

    .left {
        background-image: url('@/assets/img/login-bg.png');
        @include displayCenter();
        text-align: center;

        .desc {
            margin-top: 24px;
            color: #fff;
            font-size: 28px;
        }

        .user {
            margin-top: 10px;
            color: #ccc;
            font-size: 20px
        }

    }

    .right {
        @include displayCenter();

        .title {
            font-size: 26px;
            font-weight: 500;
        }

        .desc {
            margin-top: 18px;
            color: #666;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .btn-line {
            margin-top: 20px;

            button {
                margin-right: 20px;
            }
        }

        .ant-form {

            .tel-input,
            .code-input {
                border-radius: 20px;
            }
        }
    }
}
</style>